<!doctype html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>网上购物系统</title>
    <link rel="stylesheet" href="os/css/bootstrap.min.css">
    <style>
        hr{
            margin: 0;
        }
        img{
            width: 100%;
        }
        ul{
            border: 0;
        }
        .list-group-item{
            margin-bottom: 0;
            border: 0;
            border-bottom: 1px dashed #ddd;
            background-color: inherit;
        }
        .list2{
            border-bottom: 0;
        }
        .table>tbody>tr>th{
            text-align: center;
            border-bottom: 0;
            border-top: 0;
            background: #fafafa url(http://s8.mogucdn.com/pic/140909/1blhwf_ieydemldmy4tombtmmytambqgiyde_5x40.gif) repeat-x;
        }
        .table>tbody>tr>td{
            position: relative;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        .table>tbody>tr>td:first-child{
            border-left: 1px solid #ddd;
        }
        .table>tbody>tr>td:last-child{
            border-right: 1px solid #ddd;
        }
        table tr td img{
            width: 80px;
            height: 80px;
        }
        .product-card {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .product-card img {
            width: 60px;
            height: 60px;
            margin-right: 10px;
        }
        .product-card .product-info {
            flex: 1;
        }
    </style>
</head>
<body>
<!--顶部导航-->
<div id="top-part"></div>
<div id="search-part"></div>

<!--主体内容-->
<hr>
<div class="container">
    <div class="row">
        <div class="col-md-3" style="background: #f7f7f7">
            <ul class="list-group">
                <li  class="list-group-item" id="userimg-part"></li>



            </ul>
        </div>
        <div class="col-md-9">
            <table class="table" id="order-table">
                <tbody>
                <tr>
                    <th colspan="3">商品信息</th>
                    <th>订单编号</th>
                    <th>下单时间</th>
                    <th>售后</th>
                    <th>实付款（元）</th>
                    <th>交易状态</th>
                    <th>操作</th>
                </tr>
                <!-- 订单信息将动态插入到这里 -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="os/js/jquery-1.11.0.min.js"></script>
<script src="os/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // 获取订单信息
        $.ajax({
            url: "order/getorderbyuserid",
            type: "GET",
            success: function(response) {
                if (response.code === 0 && response.data) {
                    var orders = response.data;
                    var orderTableBody = $("#order-table tbody");
                    console.log(orders);

                    orders.forEach(function(order) {
                        // 获取订单的商品信息
                        $.ajax({
                            url: "orderinfo/getorderinfobyid",
                            type: "GET",
                            data: { orderid: order.orderid },
                            success: function(productResponse) {
                                if (productResponse.code === 0 && productResponse.data) {
                                    var product = productResponse.data;
                                    var productCards = '';

                                    productCards += `
                                    <div class="product-card">
                                        <div class="product-info">
                                            <div>${product.name}</div>
                                            <div>数量: ${product.quantity}</div>
                                            <div>价格: ${product.price} 元</div>
                                        </div>
                                    </div>
                                `;

                                    // 插入订单信息到表格
                                    // 插入订单信息到表格
                                    orderTableBody.append(`
    <tr>
        <td colspan="3">${productCards}</td>
        <td>${order.code}</td>
        <td>${order.addtime}</td>
        <td>售后</td>
        <td>${order.money} 元</td>
        <td>${order.state === 0 ? "未支付" : "已支付"}</td> <!-- 修改交易状态显示 -->
        <td>${order.state === 0 ? "未支付" : "已支付"}</td>
        <td>
            <button class="btn btn-primary">查看详情</button>
            <button id="go-to-pay" class="btn btn-success" data-order-id="${order.orderid}">去支付</button>
            <button class="btn btn-warning confirm-receipt" data-order-id="${order.orderid}">确认收货</button>
        </td>
    </tr>
`);
                                } else {
                                    console.error("获取商品信息失败:", productResponse.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error("请求商品信息失败:", error);
                            }
                        });
                    });

                    $(document).on("click", ".confirm-receipt", function() {
                        console.log("确认收货按钮被点击"); // 调试信息
                        const orderId = $(this).data("order-id");
                        console.log("订单 ID:", orderId); // 调试信息
                        const button = $(this);

                        // 发送 AJAX 请求，修改订单状态
                        $.ajax({
                            url: "order/getproduct", // 后端接口路径
                            type: "POST", // 使用 POST 方法
                            data: {
                                orderid: orderId, // 订单 ID
                                state: "已收货" // 新的订单状态
                            },
                            success: function(response) {
                                console.log("AJAX 请求成功，响应:", response); // 调试信息
                                if (response) {
                                    // 更新页面上的订单状态
                                    button.closest("tr").find("td:eq(7)").text("已收货");
                                    alert("确认收货成功！");
                                } else {
                                    alert("确认收货失败：" + response.msg);
                                }
                            },
                            error: function(xhr, status, error) {
                                console.error("确认收货请求失败:", error); // 调试信息
                                alert("确认收货请求失败，请重试！");
                            }
                        });
                    });
                } else {
                    console.error("获取订单信息失败:", response.msg);
                }
            },
            error: function(xhr, status, error) {
                console.error("请求订单信息失败:", error);
            }
        });
    });
</script>
</body>
</html>